<template>
  <div class="app-container">
    <zl-table ref="table" url="/sys/setting/list" :param.sync="par">
      <template slot="search">
        <el-form :inline="true" :model="par" class="left">
          <el-form-item label="模块名">
            <el-select v-model="par.module" placeholder="请选择" clearable>
              <el-option v-for="item in modules" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="参数名">
            <el-input v-model="par.name" clearable placeholder="请输入" />
          </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-search" type="primary" size="small" @click="query">搜 索</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template slot="toolbar">
        <el-row v-permission="['setting:add']" :gutter="10">
          <el-col :span="1.5">
            <el-button size="small" plain type="primary" icon="el-icon-plus" @click="addSetting">新 增</el-button>
          </el-col>
        </el-row>
      </template>
      <template slot="cols">
        <el-table-column align="center" width="50px" type="index" :index="indexMethod" />
        <el-table-column width="150px" prop="module" label="模块" align="center" show-overflow-tooltip sortable="custom" />
        <el-table-column prop="name" label="参数名" width="200px" show-overflow-tooltip sortable="custom" />
        <el-table-column prop="value" label="参数值" min-width="150px" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.encrypt!==0">******</span>
            <span v-if="scope.row.encrypt===0">{{ scope.row.value }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" min-width="250px" show-overflow-tooltip />
        <el-table-column prop="effect" label="生效方式" align="center" width="120px" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.effect===1">重启系统</span>
            <span v-else-if="scope.row.effect===2">刷新缓存</span>
            <span v-else>立即生效</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="100px">
          <template slot-scope="scope">
            <el-button
              v-permission="['setting:edit']"
              title="编辑"
              type="primary"
              circle
              plain
              class="el-icon-edit"
              size="mini"
              @click.native.prevent="editRow(scope.$index, scope.row)"
            />
          </template>
        </el-table-column>
      </template>
    </zl-table>
    <el-dialog :title="title" :visible.sync="show" :append-to-body="true" :close-on-click-modal="false" width="500px">
      <el-form ref="editForm" :model="form" :rules="rules" :label-width="labelWidth">
        <el-form-item label="模块名" prop="module" class="is-required">
          <el-input v-model="form.module" clearable autocomplete="off" maxlength="50" placeholder="请输入模块名" :readonly="!add" />
        </el-form-item>
        <el-form-item label="参数名" prop="name" class="is-required">
          <el-input v-model="form.name" clearable autocomplete="off" maxlength="50" placeholder="请输入参数名" :readonly="!add" />
        </el-form-item>
        <el-form-item v-show="showEncrypt" label="是否加密" prop="encrypt">
          <el-select v-model="form.encrypt" placeholder="请选择" :readonly="!add">
            <el-option label="否" :value="0" />
            <el-option label="是" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="参数值" prop="value">
          <span slot="label" v-if="form.encrypt !== 0">
            <el-tooltip content="参数值为加密值，请谨慎修改" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
            参数值
          </span>
          <el-input
            v-if="form.encrypt === 0"
            v-model="form.value"
            type="textarea"
            :autosize="{minRows:3,maxRows:4}"
            clearable
            autocomplete="off"
            placeholder="请输入参数值"
          />
          <el-input
            v-if="form.encrypt !== 0"
            v-model="form.value"
            :type="showPwd"
            autocomplete="off"
            placeholder="请输入参数值">
            <i slot="suffix" class="el-input__icon el-icon-view point" @click="showPwd = showPwd==='password' ? 'text' : 'password'"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input
            v-model="form.description"
            type="textarea"
            :autosize="{minRows:3,maxRows:4}"
            clearable
            autocomplete="off"
            placeholder="请输入描述"
            maxlength="50"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" :loading="loading" @click="saveOrg">保 存</el-button>
        <el-button size="small" @click="show = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { validator } from '@/utils/form'
import request from '@/utils/request'
import ZlTable from '@/components/table/table-con'
export default {
  name: 'Setting',
  components: { ZlTable },
  data() {
    return {
      par: {
        module: '',
        name: ''
      },
      modules: [],
      form: {
        module: '', name: '', value: '', description: '', encrypt: 0, type: 0, effect: 0
      },
      showPwd: "password",
      title: '修改参数',
      add: false,
      loading: false,
      show: false,
      showEncrypt: false,
      labelWidth: '80px'
    }
  },
  computed: {
    rules() {
      return {
        module: [
          { validator: validator('notBlank'), message: '模块名不能为空', trigger: ['blur', 'change'] }
        ],
        name: [
          { validator: validator('notBlank'), message: '参数名不能为空', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  mounted() {
    request({
      url: '/sys/setting/getModule', method: 'get'
    }).then((r) => {
      this.modules = r.data
    })
  },
  methods: {
    saveOrg() {
      this.$refs.editForm.validate(r => {
        if (r) {
          this.loading = true
          request({
            url: '/sys/setting/save', method: 'post', data: this.form
          }).then((r) => {
            this.$message.success('保存成功')
            this.loading = false
            this.show = false
            this.query()
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    addSetting() {
      this.title = '新增参数'
      this.show = true
      this.add = true
      this.showEncrypt = true
      this.form = { encrypt: 0, type: 0 }
      this.$nextTick(() => {
        this.$refs.editForm.clearValidate()
      })
    },
    editRow(index, row) {
      this.title = '修改参数'
      console.log(row)
      this.add = false
      this.form = this.$util.copy(row)
      this.form.type = 1
      this.show = true
      this.showEncrypt = false
      this.$nextTick(() => {
        this.$refs.editForm.clearValidate()
      })
    },
    query() {
      this.$refs.table.query()
    },
    indexMethod(index) {
      return (this.$refs.table.pageNum - 1) * this.$refs.table.pageSize + index + 1
    }
  }
}
</script>
<style scoped>

</style>
